<template>
  <ContentWrap>
    <div
      style="
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      "
    >
      <div style="width: 80%; margin-left: 1%; color: black">
        <h1 class="report-sub-title">Data Information</h1>

        <vxe-grid v-bind="dataProperty" style="width: 100%">
          <template #key="{ row }">
            <div>
              <span style="font-size: 18px; font-weight: bold; color: black">
                {{ row.key }}
              </span>
            </div>
          </template>
          <template #value="{ row }">
            <div>
              <span style="font-size: 18px; font-weight: 400">
                {{ row.value }}
              </span>
            </div>
          </template>
        </vxe-grid>

        <!--
        <h1 class="report-sub-title">细胞类型及比例</h1>
        <vxe-table
          class="mytable-style"
          border
          align="center"
          show-overflow
          :row-config="{ height: 36, isCurrent: true, isHover: true }"
          :column-config="{ resizable: true }"
          :scroll-y="{ enabled: false }"
          :span-method="mergeRowMethod"
          :row-class-name="rowClassName"
          :cell-class-name="cellClassName"
          :stripe="true"
          :data="reportCellRatioData.tableData"
        >
          <vxe-column field="className" width="200px" />
          <vxe-column field="cellType" title="细胞类型"></vxe-column>
          <vxe-column field="exprRatio" title="检测样本细胞比例"></vxe-column>
          <vxe-column field="ctrlRatio" title="对照样本细胞比例"></vxe-column>
        </vxe-table>
-->
        <h1 class="report-sub-title">The distribution of cell types in human testes</h1>
        <div
          style="
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
          "
        >
          <div style="width: 55%; margin-bottom: 16px">
            <vxe-table
              class="mytable-style"
              border
              align="center"
              show-overflow
              :row-config="{ height: 44, isCurrent: true, isHover: true }"
              :column-config="{ resizable: true }"
              :scroll-y="{ enabled: false }"
              :span-method="mergeRowMethod"
              :row-class-name="rowClassName"
              :cell-class-name="cellClassName"
              :stripe="true"
              :data="reportCellRatioData.germ"
            >
              <vxe-column field="cellType" title="Germ cells"></vxe-column>
              <vxe-column
                field="exprRatio"
                title="Proportion of Clusters in Detected Sample"
                sort-type="number"
                sortable
              ></vxe-column>
              <vxe-column
                field="ctrlRatio"
                title="Proportion of Clusters in Control Sample"
                sort-type="number"
                sortable
              ></vxe-column>
            </vxe-table>
          </div>
          <div v-if="data.germExist" style="width: 45%; text-align: center">
            <el-image :src="getUrl('germ_CellRatio_v2.png')" style="height: 420px">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
          </div>
        </div>
        <div
          style="
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
          "
        >
          <div style="width: 55%">
            <vxe-table
              class="mytable-style"
              border
              align="center"
              show-overflow
              :row-config="{ height: 44, isCurrent: true, isHover: true }"
              :column-config="{ resizable: true }"
              :scroll-y="{ enabled: false }"
              :span-method="mergeRowMethod"
              :row-class-name="rowClassName"
              :cell-class-name="cellClassName"
              :stripe="true"
              :data="reportCellRatioData.somatic"
            >
              <vxe-column field="cellType" title="Somatic cells"></vxe-column>
              <vxe-column
                field="exprRatio"
                title="Proportion of Clusters in Detected Sample"
                sort-type="number"
                sortable
              ></vxe-column>
              <vxe-column
                field="ctrlRatio"
                title="Proportion of Clusters in Control Sample"
                sort-type="number"
                sortable
              ></vxe-column>
            </vxe-table>
          </div>
          <div style="width: 45%; text-align: center">
            <el-image :src="getUrl('somatic_CellRatio_v2.png')" style="height: 420px">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
            <div style="font-size: 18px">The distribution of somatic cell types</div>
          </div>
        </div>

        <h1 class="report-sub-title">Cell Type Annotation and Distribution of Samples</h1>
        <div>
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: flex-start;
              justify-content: space-between;
            "
          >
            <el-image :src="getUrl('plot_umap.png')" style="width: 30%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
            <el-image :src="getUrl('plot_umap_nolabel.png')" style="width: 37%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
            <el-image :src="getUrl('p_ratio.png')" style="width: 42%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: flex-start;
              justify-content: space-between;
            "
          >
            <el-image :src="getUrl('p_marker_dotplot.png')" style="width: 60%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
            <el-image :src="getUrl('p_marker_featureplot.png')" style="width: 47%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
          </div>
        </div>

        <h1 class="report-sub-title">Germ cells</h1>
        <div v-if="data.germExist">
          <div
            style="display: flex; flex-direction: row; align-items: center; justify-content: center"
          >
            <div style="font-size: 24px; margin-right: 50px">The distribution of DEGs</div>
            <el-image :src="getUrl('germ_p_deg_volcano.png')" style="width: 60%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
          </div>
          <div
            style="display: flex; flex-direction: row; align-items: center; justify-content: center"
          >
            <div style="font-size: 24px; margin-right: 50px">The summary of DEGs</div>
            <el-image :src="getUrl('germ_degCount_bar_plot.png')" style="width: 60%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
          </div>
          <div style="width: 100%; text-align: center">
            <el-image :src="getUrl('germ_up_go_point_plot_BP.png')" style="width: 80%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
            <el-image :src="getUrl('germ_down_go_point_plot_BP.png')" style="width: 80%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
            <el-image :src="getUrl('germ_up_go_point_plot_MF.png')" style="width: 80%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
            <el-image :src="getUrl('germ_down_go_point_plot_MF.png')" style="width: 80%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
          </div>
        </div>
        <div v-else style="width: 100%; text-align: center">
          <el-image :src="getSystemUrl('/ref/germ_default.png')" style="width: 40%">
            <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template>
          </el-image>
        </div>

        <h1 class="report-sub-title">Somatic cells</h1>
        <div>
          <div
            style="display: flex; flex-direction: row; align-items: center; justify-content: center"
          >
            <div style="font-size: 24px; margin-right: 50px">The distribution of DEGs</div>
            <el-image :src="getUrl('somatic_p_deg_volcano.png')" style="width: 60%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
          </div>
          <div
            style="display: flex; flex-direction: row; align-items: center; justify-content: center"
          >
            <div style="font-size: 24px; margin-right: 50px">The summary of DEGs</div>
            <el-image :src="getUrl('somatic_degCount_bar_plot.png')" style="width: 60%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
          </div>
          <div style="width: 100%; text-align: center">
            <el-image :src="getUrl('somatic_up_go_point_plot_BP.png')" style="width: 80%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
            <el-image :src="getUrl('somatic_down_go_point_plot_BP.png')" style="width: 80%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
            <el-image :src="getUrl('somatic_up_go_point_plot_MF.png')" style="width: 80%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
            <el-image :src="getUrl('somatic_down_go_point_plot_MF.png')" style="width: 80%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
          </div>
        </div>

        <h1 class="report-sub-title">Supplementary Figures - Data Processing</h1>
        <div>
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
            "
          >
            <el-image :src="getUrl('plot_qc.png')" style="width: 30%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>

            <el-image :src="getUrl('pca_dim_num.png')" style="width: 26%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
            "
          >
            <el-image :src="getUrl('annotation_result.png')" style="width: 50%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>

            <el-image :src="getUrl('plot_umap_label_with_color.png')" style="width: 30%">
              <template #placeholder>
                <div class="image-slot">Loading<span class="dot">...</span></div>
              </template>
            </el-image>
          </div>
        </div>

        <h1 class="report-sub-title">Supplementary Figures – Germ cells</h1>
        <div
          v-if="data.germExist"
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
          "
        >
          <el-image :src="getUrl('germ_UMAP_Sample.png')" style="width: 35%">
            <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template>
          </el-image>
          <el-image :src="getUrl('germ_UMAP.png')" style="width: 39%">
            <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template>
          </el-image>
          <el-image :src="getUrl('germ_CellRatio.png')" style="width: 29%">
            <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template>
          </el-image>
        </div>
        <div v-else style="width: 100%; text-align: center">
          <el-image :src="getSystemUrl('/ref/germ_default.png')" style="width: 40%">
            <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template>
          </el-image>
        </div>
        <h1 class="report-sub-title">Supplementary Figures – Somatic cells</h1>
        <div
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
          "
        >
          <el-image :src="getUrl('somatic_UMAP_Sample.png')" style="width: 35%">
            <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template>
          </el-image>
          <el-image :src="getUrl('somatic_UMAP.png')" style="width: 39%">
            <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template>
          </el-image>
          <el-image :src="getUrl('somatic_CellRatio.png')" style="width: 29%">
            <template #placeholder>
              <div class="image-slot">Loading<span class="dot">...</span></div>
            </template>
          </el-image>
        </div>
        <h1 class="report-sub-title">Download</h1>
        <div style="display: flex; flex-direction: column; width: 800px">
          <div class="fileItem" v-for="item in csvFiles" :key="item.name">
            <a style="color: #2d8cf0">{{ item.title }}{{ item.name }}</a>
            <div>
              <el-button size="default" type="success"
                ><a style="color: white" :href="getUrl(item.name)" target="_blank"
                  >Preview</a
                ></el-button
              >
              <el-button size="default" type="primary"
                ><a style="color: white" :href="getDownloadUrl(item.name)">Download</a>
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts" name="Report">
import { VxeGridProps, VxeTablePropTypes } from 'vxe-table'
import {
  getReportCellRatio,
  getReportDatasource,
  ReportDatasourceResponse,
  checkCelltypeExist
} from '@/api/sca/task'

defineOptions({ name: 'TaskReport' })

const data = reactive({
  addFormInputStyle: 'width: 300px',
  addDialog: false,
  editMode: false,
  isRunNow: false,
  germExist: true,
  reportDatasource: ref({} as ReportDatasourceResponse)
})

const reportCellRatioData = reactive({
  germ: [],
  somatic: []
})

const rowClassName: VxeTablePropTypes.RowClassName = ({ row, rowIndex }) => {
  // if ([2, 3, 5].includes(rowIndex)) {
  //     return 'row-green'
  // }
  return null
}

const cellClassName: VxeTablePropTypes.CellClassName = ({ row, column }) => {
  // console.log(column)
  if (column.field === 'className') {
    if (row.className === '生殖细胞') {
      return 'col-orange'
    } else if (row.className === '体细胞') {
    }
    return 'col-red'
  }
  return null
}

// 通用行合并函数（将相同多列数据合并为一行）
const mergeRowMethod: VxeTablePropTypes.SpanMethod = ({ row, _rowIndex, column, visibleData }) => {
  const fields = ['className']
  const cellValue = row[column.field]
  if (cellValue && fields.includes(column.field)) {
    const prevRow = visibleData[_rowIndex - 1]
    let nextRow = visibleData[_rowIndex + 1]
    if (prevRow && prevRow[column.field] === cellValue) {
      return { rowspan: 0, colspan: 0 }
    } else {
      let countRowspan = 1
      while (nextRow && nextRow[column.field] === cellValue) {
        nextRow = visibleData[++countRowspan + _rowIndex]
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 }
      }
    }
  }
}

// 数据属性
const dataProperty = reactive<VxeGridProps>({
  border: true,
  // height: 530,
  align: 'center',
  loading: false,
  columnConfig: {
    resizable: true
  },
  showHeader: false,
  showOverflow: true,
  rowConfig: {
    height: 42,
    isCurrent: true,
    isHover: true,
    keyField: 'id'
  },
  stripe: true,
  data: [
    { key: 'Name', value: data.reportDatasource.name },
    { key: 'Age', value: data.reportDatasource.age },
    { key: 'Clinical Diagnosis Type', value: data.reportDatasource.clinicalDiagnosisType },
    { key: 'Visibility of Germ Cells', value: data.reportDatasource.germCellsVisible },
    { key: 'Data Type', value: data.reportDatasource.dataType },
    // {key: "是否为生物学重复", value: data.reportDatasource.},
    { key: 'Chromosome Karyotype', value: data.reportDatasource.karyotype },
    { key: 'Presence of Genetic Pedigree', value: data.reportDatasource.isGeneticFamily },
    // {key: "样本数", value: 11},
    { key: 'Remove batch effect', value: data.reportDatasource.isReduction },
    { key: 'Control', value: data.reportDatasource.ctrlName },
    { key: 'Cell Count', value: data.reportDatasource.cellCount },
    { key: 'Gene Count', value: data.reportDatasource.geneCount }
  ],
  columns: [
    { field: 'key', width: 400, slots: { default: 'key' } },
    { field: 'value', slots: { default: 'value' } }
  ]
} as VxeGridProps)

const taskId = ref()
const { params } = useRoute() // 查询参数
const getUrl = (fileName: string) => {
  return (
    import.meta.env.VITE_BASE_URL +
    '/app-api/sca/file/download?forceDownload=false&fileType=output&taskId=' +
    taskId.value +
    '&&fileName=' +
    fileName
  )
}

const getSystemUrl = (filePath: string) => {
  return import.meta.env.VITE_BASE_URL + '/app-api/sca/file/preview?filePath=' + filePath
}

const getDownloadUrl = (fileName: string) => {
  return (
    import.meta.env.VITE_BASE_URL +
    '/app-api/sca/file/download?forceDownload=true&fileType=output&taskId=' +
    taskId.value +
    '&&fileName=' +
    fileName
  )
}

const reportCellRatioMethod = () => {
  getReportCellRatio({ taskId: taskId.value }).then((res: any) => {
    reportCellRatioData.germ = res['germ']
    reportCellRatioData.somatic = res['somatic']
  })
}

const reportDatasourceMethod = () => {
  getReportDatasource({ taskId: taskId.value }).then((res: any) => {
    // console.log(res)
    data.reportDatasource = res
    dataProperty.data = [
      { key: 'Name', value: data.reportDatasource.name },
      { key: 'Age', value: data.reportDatasource.age },
      { key: 'Clinical Diagnosis Type', value: data.reportDatasource.clinicalDiagnosisType },
      {
        key: 'Visibility of Germ Cells',
        value: data.reportDatasource.germCellsVisible ? 'Yes' : 'No'
      },
      { key: 'Data Type', value: data.reportDatasource.dataType },
      // {key: "是否为生物学重复", value: data.reportDatasource.},
      { key: 'Chromosome Karyotype', value: data.reportDatasource.karyotype },
      {
        key: 'Presence of Genetic Pedigree',
        value: data.reportDatasource.isGeneticFamily ? 'Yes' : 'No'
      },
      // {key: "样本数", value: 11},
      { key: 'Remove batch effect', value: data.reportDatasource.isReduction ? 'Yes' : 'No' },
      { key: 'Control', value: data.reportDatasource.ctrlName },
      { key: 'Cell Count', value: data.reportDatasource.cellCount },
      { key: 'Gene Count', value: data.reportDatasource.geneCount }
    ]
    // demo3.tableData = res
  })
}
let csvFiles = [
  { title: '【Cell Ratio】', name: 'AllCellRatio_data.csv' },
  { title: '【DEGs in germ cells】', name: 'germ_different_expression_gene.csv' },
  { title: '【Down-regulated pathways in germ cells】', name: 'germ_downGo.csv' },
  { title: '【Up-regulated pathways in germ cells】', name: 'germ_upGo.csv' },
  { title: '【DEGs in somatic cells】', name: 'somatic_different_expression_gene.csv' },
  { title: '【Down-regulated pathways in somatic cells】', name: 'somatic_downGo.csv' },
  { title: '【Up-regulated pathways in somatic cells】', name: 'somatic_upGo.csv' }
]

onMounted(() => {
  const id = params.taskId as unknown as number
  taskId.value = id

  reportCellRatioMethod()
  reportDatasourceMethod()

  checkCelltypeExist({
    cellType: 'germ',
    taskId: id
  }).then((res: any) => {
    data.germExist = res
    if (!res) {
      csvFiles = [
        { title: '【Cell Ratio】', name: 'AllCellRatio_data.csv' },
        { title: '【DEGs in somatic cells】', name: 'somatic_different_expression_gene.csv' },
        { title: '【Down-regulated pathways in somatic cells】', name: 'somatic_downGo.csv' },
        { title: '【Up-regulated pathways in somatic cells】', name: 'somatic_upGo.csv' }
      ]
    }
  })
})

console.log()
</script>

<style scoped>
.report-sub-title {
  font-size: 20px;
  font-weight: bold;
  /*text-shadow: 1px 1px 3px #c0c0c0;*/
  width: 100%;
  background-color: #e3e3e3;
  border: #d3d3d3 1px solid;
  border-radius: 4px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 12px;
  padding: 4px 0;
  /*background: url('https://sca-1251798209.cos.ap-nanjing.myqcloud.com/sca/细胞2.png') no-repeat;*/
  /*background-size: contain;*/
  /*background-position-x: 0;*/
  /*padding-left: 40px;*/
  /*margin-left: -20px;*/
}

.report-sub-title-small {
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 3px #c0c0c0;
}

.fileItem {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /*margin: 4px 4px;*/
  padding: 4px 30px 4px 4px;
}

.fileItem:hover {
  background-color: #f8f8f9;
  border-radius: 4px;
}
</style>
